<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>4-父组件子组件通信-下拉数据变为城市和日期</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>自定义下拉框组件</h2>
        <custom-select btn="搜索" v-bind:list="list1"></custom-select>

        <h2>自定义下拉框2</h2>
        <custom-select btn="查询" v-bind:list="list2"></custom-select>
    </div>


    <script>
        Vue.component('custom-select', {
            data: function() {
                return {
                    selectShow: false,
                    liVal: ""
                }

            },
            props: ["btn", "list"],
            template: `
                            <section class="warp">
                                <div class="searchIpt clearFix">
                                    <div class="clearFix">
                                        <input type="text" class="keyWord" @click="selectShow = !selectShow" :value="liVal" />
                                        <input type="button" :value="btn">
                                        <span></span>
                                    </div>
                                    <custom-list v-show="selectShow" :ulist="list" v-on:receive="getVal"></custom-list>
                                </div>       
                            </section>               
                        `,
            methods: {
                getVal(val) {
                    // alert('我被点击了');
                    this.liVal = val;
                    this.selectShow = false;
                }
            }
        })

        Vue.component('custom-list', {
            props: ["ulist"],
            template: `
                        <ul class="list">
                            <li v-for="(item,index) in ulist" :key="index" @click="cVal(item)">{{item}}</li>
                        </ul>
                    `,
            methods: {
                cVal: function(item) {
                    this.$emit('receive', item)
                }
            }

        })



        new Vue({
            el: "#app",
            data: {
                list1: ['北京', '上海', '杭州'],
                list2: ['晴天', '阴天', '雨天']
            }
        })

        var keyWord = document.querySelector('.keyWord');
        var list = document.querySelector('.list');
        var lis = list.querySelectorAll('li');

        keyWord.onfocus = function() {
            list.style.display = 'block';
        }

        keyWord.onblur = function() {
            setTimeout(function() {
                list.style.display = 'none';
            }, 80);
        }

        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'active';
                console.log(this.innerHTML);
                keyWord.value = this.innerHTML;
            }
        }
    </script>
</body>

</html>